<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理系统</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/qs.js"></script>
</head>
<body>
<div id="div">
    <b style="color: red; font-size: 20px;">学生列表</b>
    <div style="float: right;">
        <el-button type="primary" @click = " dialogAddFormVisible = true;">添加学生</el-button>
    </div>

    <el-table :data="tableData">
        <el-table-column prop="number" label="学号" width="120">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="birthday" label="生日" width="140">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
        <el-table-column label="操作" width="180">
            <template slot-scope="props">
                <el-button type="warning" @click="showEditDialog(props.row)">编辑</el-button>
                <el-button type="danger" @click="deleteStudent(props.row.number)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--
    分页组件
    @size-change： 当改变每页条数时触发的函数
    @current-change：当改变页码时触发的函数
    current-page ：默认的页码
    :page-sizes：每页条数选择框中显示的值
    :page-size : 默认的每页条数
    layout： 分页组件的布局
    total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
    :total: 总条数
    -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[3,5,8]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>





    <!--dialogAddFormVisible表示对话框的状态，显示还是隐藏-->
    <el-dialog title="新增学生" :visible.sync="dialogAddFormVisible" @closed="$refs['addForm'].resetFields()">
        <el-form :model="formData" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="学生学号" prop="number">
                <el-input v-model="formData.number"></el-input>
            </el-form-item>
            <el-form-item label="学生姓名" prop="name">
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="学生生日" prop="birthday">
                <el-input v-model="formData.birthday" type="date"></el-input>
            </el-form-item>
            <el-form-item label="学生地址" prop="address">
                <el-input v-model="formData.address"></el-input>
            </el-form-item>
            <el-form-item align="right">
                <el-button type="primary" @click="addStudent">添加</el-button>
                <el-button @click="$refs['addForm'].resetFields()">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>








    <!--dialogAddFormVisible表示对话框的状态，显示还是隐藏-->
    <el-dialog title="编辑学生" :visible.sync="dialogEditFormVisible" @closed="$refs['editForm'].resetFields()">
        <el-form :model="editFormData" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="学生学号" prop="number">
                <el-input v-model="editFormData.number"></el-input>
            </el-form-item>
            <el-form-item label="学生姓名" prop="name">
                <el-input v-model="editFormData.name"></el-input>
            </el-form-item>
            <el-form-item label="学生生日" prop="birthday">
                <el-input v-model="editFormData.birthday" type="date"></el-input>
            </el-form-item>
            <el-form-item label="学生地址" prop="address">
                <el-input v-model="editFormData.address"></el-input>
            </el-form-item>
            <el-form-item align="right">
                <el-button type="primary" @click="updateStudent()">修改</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>



    <script>
        new Vue({
            el: "#div",
            data: {
                tableData: [],//表格数据
                pagination: {
                    currentPage: 1, //当前页
                    pageSize: 5,    //每页显示条数
                    total: 0        //总条数
                },

                dialogAddFormVisible: false ,

                dialogEditFormVisible: false ,

                formData:{},

                editFormData:{},

                rules:{
                    number: [
                        {required: true, message: '请输入学号', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                    ],
                    birthday: [
                        {required: true, message: '请选择日期', trigger: 'change'}
                    ],
                    address: [
                        {required: true, message: '请输入地址', trigger: 'blur'},
                        {min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur'}
                    ]
                }
            },
            methods: {
                /*分页查询*/
                findByPage: function () {
                    axios.post("FindStudentByPageServlet", Qs.stringify({
                        pageSize: this.pagination.pageSize,
                        currentPage: this.pagination.currentPage
                    })).then(resp => {
                        this.tableData = resp.data.list;
                        this.pagination.total = resp.data.total;
                    })
                },
                /*改变每页条数执行的函数*/
                handleSizeChange(pageSize) {
                    //修改分页查询的参数
                    //console.log(pageSize)
                    this.pagination.pageSize = pageSize;
                    //重新查询
                    this.findByPage();
                },

                /*改变页码执行的函数*/
                handleCurrentChange(pageNum) {
                    //修改分页查询的参数
                    this.pagination.currentPage = pageNum;
                    //console.log(pageNum);
                    //重新查询
                    this.findByPage();
                },

                /*添加学生执行的函数*/
                addStudent:function(){
                    axios.post("AddStudentServlet", Qs.stringify(
                       this.formData
                    )).then(resp => {
                        if (resp){
                            this.$message({
                                message: '恭喜你，添加成功',
                                type: 'success'
                            });
                            this.dialogAddFormVisible = false;
                            this.findByPage();
                        }else {
                            this.message.error("添加失败");
                        }
                        console.log(resp);
                    })
                },

                /*显示修改dialog框*/
                showEditDialog:function (row){
                    this.dialogEditFormVisible = true;
                    this.editFormData = row;
                },

                /*修改学生的函数*/
                updateStudent:function (){
                    axios.post("UpdateStudentServlet", Qs.stringify(
                        this.editFormData
                    )).then(resp => {
                        if (resp){
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.dialogEditFormVisible = false;
                            this.findByPage();
                        }else {
                            this.message.error("修改失败");
                        }
                        console.log(resp);
                    })
                },

                /*删除学生的函数*/
                deleteStudent:function (number){
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post("DeleteStudentServlet", Qs.stringify({
                                number:number
                            }
                        )).then(resp => {
                            if (resp){
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });

                                this.findByPage();
                            }else {
                                this.message.error("删除失败");
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });

                }


            },

            created: function () {
                this.findByPage();
            }
        })


    </script>
</div>
</body>
</html>
